<template>
  <a-tree-select
    v-model:model-value="value"
    :data="treeData"
    :disabled="disabled"
    :loading="loading"
    :allow-search="true"
    :filter-tree-node="titleFilter"
    placeholder="请选择菜单"
  />
</template>

<script setup lang="ts">
  import type { TreeNodeData } from '@arco-design/web-vue';
  import { useCacheStore } from '@/store';
  import { computed, onBeforeMount, ref } from 'vue';
  import { titleFilter } from '@/types/form';
  import useLoading from '@/hooks/loading';

  const props = defineProps<{
    modelValue?: number;
    disabled: boolean;
  }>();
  const emits = defineEmits(['update:modelValue']);
  const { loading, setLoading } = useLoading();
  const cacheStore = useCacheStore();
  const treeData = ref<Array<TreeNodeData>>([]);
  const value = computed({
    get() {
      return props.modelValue;
    },
    set(e) {
      emits('update:modelValue', e);
    },
  });
  onBeforeMount(async () => {
    const render = (arr: any[]): TreeNodeData[] => {
      return arr
        .map((s) => {
          // 当前节点
          const node = {
            key: s.id,
            title: s.title,
            children: undefined as unknown,
          } as TreeNodeData;
          // 子节点
          if (s.children && s.children.length) {
            node.children = render(s.children);
          }
          return node;
        })
        .filter(Boolean);
    };

    // 加载数据
    try {
      setLoading(true);
      const menus = await cacheStore.loadMenus();
      treeData.value = [
        {
          key: 0,
          title: '根目录',
          children: render([...menus]),
        },
      ];
    } catch (e) {
      setLoading(false);
    } finally {
      setLoading(false);
    }
  });
</script>

<style scoped lang="less"></style>
